<template>
    <div style="margin-top:-50px;">
        <el-divider></el-divider>
        <el-form :resetFields="resetFormData" :model="queryParams" ref="queryFormRef" :inline="true"
            label-width="48px">
            <el-form-item label="名称" prop="templateName">
                <el-input v-model="queryParams.templateName" placeholder="请输入物模型名称" clearable />
            </el-form-item>
            <el-form-item label="类别" prop="type">
                <el-select v-model="queryParams.type" placeholder="请选择模型类别" clearable>
                    <el-option v-for="dict in iot_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" small @click="handleQuery">搜索</el-button>
                <el-button icon="refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="thingsModelTemplateList" @selection-change="handleSelectionChange"
            ref="selectTemplateTable">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="名称" align="center" prop="templateName" />
            <el-table-column label="标识符" align="center" prop="identifier" />
            <el-table-column label="物模型类别" align="center" prop="type">
                <template #default="scope">
                    <dict-tag :options="iot_type" :value="scope.row.type" />
                </template>
            </el-table-column>
            <el-table-column label="图表展示" align="center" prop="isChart" width="75">
                <template #default="scope">
                    <dict-tag :options="iot_yes_no" :value="scope.row.isChart" />
                </template>
            </el-table-column>
            <el-table-column label="实时监测" align="center" prop="isMonitor" width="75">
                <template #default="scope">
                    <dict-tag :options="iot_yes_no" :value="scope.row.isMonitor" />
                </template>
            </el-table-column>
            <el-table-column label="只读" align="center" prop="isReadonly" width="75">
                <template #default="scope">
                    <dict-tag :options="iot_yes_no" :value="scope.row.isReadonly" />
                </template>
            </el-table-column>
            <el-table-column label="历史存储" align="center" prop="isHistory" width="75">
                <template #default="scope">
                    <dict-tag :options="iot_yes_no" :value="scope.row.isHistory" />
                </template>
            </el-table-column>
            <el-table-column label="数据类型" align="center" prop="datatype">
                <template #default="scope">
                    <dict-tag :options="iot_data_type" :value="scope.row.datatype" />
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

    </div>
</template>
<script setup lang="ts">
import { ThingsModelTemplateVO, ThingsModelTemplateQuery, ThingsModelTemplateForm } from '@/api/iot/thingsModelTemplate/types';
import { listThingsModelTemplate } from '@/api/iot/thingsModelTemplate';
import { importThingsModel } from '@/api/iot/thingsModel';
const productIdAdd = inject<string>('productIdAdd')
const productNameAdd = inject<string>('productNameAdd')
const thingsModelTemplateList = ref<ThingsModelTemplateVO[]>([]);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { iot_type, iot_data_type, iot_yes_no } = toRefs<any>(proxy?.useDict('iot_data_type', 'iot_type', 'iot_yes_no'));
const total = ref(0);
const loading = ref(false);
const resetFormData = ref(false)
const queryFormRef = ref<ElFormInstance>();
// 选中数组
const ids = ref([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
const initFormData: ThingsModelTemplateForm = {
    templateId: undefined,
    templateName: undefined,
    identifier: undefined,
    type: 1,
    datatype: '1',
    specs: undefined,
    isChart: 1,
    isMonitor: 1,
    isHistory: 1,
    isReadonly: 1,
    isSharePerm: 1,
    modelOrder: 0,
}
const data = reactive<PageData<ThingsModelTemplateForm, ThingsModelTemplateQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        templateName: undefined,
        identifier: undefined,
        type: undefined,
        params: {
        }
    },
    rules: {
        templateId: [
            { required: true, message: "物模型ID不能为空", trigger: "blur" }
        ],
        templateName: [
            { required: true, message: "物模型名称不能为空", trigger: "blur" }
        ],
        identifier: [
            { required: true, message: "标识符，产品下唯一不能为空", trigger: "blur" }
        ],
        type: [
            { required: true, message: "模型类别不能为空", trigger: "change" }
        ],
        datatype: [
            { required: true, message: "数据类型不能为空", trigger: "change" }
        ],
        isChart: [
            { required: true, message: "是否图表展示不能为空", trigger: "blur" }
        ],
        isMonitor: [
            { required: true, message: "是否实时监测不能为空", trigger: "blur" }
        ],
        isHistory: [
            { required: true, message: "是否历史存储 (0-否，1-是）不能为空", trigger: "blur" }
        ],
    }
});

const { queryParams } = toRefs(data);

/** 查询通用物模型列表 */
const getList = async () => {
    loading.value = true;
    const res = await listThingsModelTemplate(queryParams.value);
    thingsModelTemplateList.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}
// 多选框选中数据
const handleSelectionChange = (selection) => {
    ids.value = selection.map((item) => item.templateId);
    single.value = selection.length !== 1;
    multiple.value = !selection.length;
}
//导入
const daoru = async (data) => {
    // console.log("导入");
    // console.log(data);
    // if (data.templateIds.length===0) {
    //     proxy?.$modal.msgError("请选择一条数据");
    //     return;
    // }
    loading.value = true;
    await importThingsModel(data).finally(() => loading.value = false);
    proxy?.$modal.msgSuccess("操作成功");
}
defineExpose({
    getList,
    daoru,
    ids,
    productIdAdd,
    productNameAdd
})
</script>
